<template>
    <div class="message">
        <dl class="title">
            <dd>{{ $t('language.message.name') }}</dd>
            <dd>
                <span @click="chooseIndex(item)" :class="iscomponent == item.component ? 'active' : ''"
                    v-for="(item, index) in list" :key="index">{{ $t(item.name) }}( {{ item.number }} )</span>
            </dd>
        </dl>
        <div class="component">
            <Transition name="slide-right">
                <component :is="iscomponent" />
            </Transition>
        </div>


    </div>
</template>

<script setup lang="ts">
import { reactive,defineAsyncComponent,markRaw } from "vue"
let notice = markRaw(defineAsyncComponent(() => import("./message/components/notice.vue")));
let email = markRaw(defineAsyncComponent(() => import("./message/components/Email.vue")));
let feedback = markRaw(defineAsyncComponent(() => import("./message/components/FeedBack.vue")));
let iscomponent: any = ref(notice)
let list = reactive([{
    name: "language.message.notice",
    number: "0",
    component: notice
}, {
    name: "language.message.email",
    number: "0",
    component: email
}, {
    name: "language.message.feedback",
    number: "0",
    component: feedback
}])
let chooseIndex = (item: any) => {
    iscomponent.value = item.component
}
</script>

<style scoped lang="scss">
.message {
    width: 100%;
    height: 100%;
    @include flex(column, flex-start, flex-start);
    .title {
        width: 100%;
        @include flex(row, space-between, center);
        height: 40px;

        dd:nth-child(1) {
            flex: 1;
            color: #fff;
            font-size: 24px;
        }

        dd:nth-child(2) {
            flex: 2;
            @include flex(row, flex-end, center);

            span {
                font-size: 18px;
                color: #b5bac8;
                cursor: pointer;
                display: block;
            }

            span+span {
                margin-left: 15px;
            }

            .active {
                color: #0a906c;
            }
        }
    }

    .component {
        width: 100%;
        flex: 1;
        max-height: 500px;
        position: relative;
    }
}
</style>